<template>
  <div class="feed-back">
    <TitleBar title="意见反馈"></TitleBar>
    <section class="tips">
      <p>留言时要把咨询或投诉举报的事情描述清楚，投诉举报某品牌刷票必须有证据留言内容可以上传图片</p>
    </section>
    <section class="message-box">
      <h6>留言信息</h6>
      <div class="content-box">
        <span class="star">留言内容</span>
        <textarea placeholder="为了您的反馈得到及时处理，请详细描述所遇到的问题，谢谢！" maxlength="150" @blur="onBlur('content')" v-model="content" v-inputDelete></textarea>
        <div class="warn-box" v-show="contentError">
          <span class="warn-icon">!</span><span>{{contentError}}</span>
        </div>
      </div>
      <div class="upload-box">
        <UploadItem tipText="使图文清晰可见" @fileUrl="onThumbOne" ref="thumbOne"></UploadItem>
        <UploadItem tipText="使图文清晰可见" @fileUrl="onThumbTwo" ref="thumbTow"></UploadItem>
        <UploadItem tipText="使图文清晰可见" @fileUrl="onThumbThree" ref="thumbThree"></UploadItem>
      </div>
      <p>（上传为JPG、PNG、GIF格式，大小在5M以内）</p>
    </section>
    <section class="division-bg"></section>
    <section class="contact-box">
      <contact-item class="public-style" leftText="与您联系">
        <div class="choose-box" slot="middledom">
          <div @click="isContact(1)">
            <span class="ring">
              <span v-show="iscontact == 1"></span>
            </span>
            <span class="text">需要</span>
          </div>
          <div @click="isContact(0)">
            <span class="ring">
              <span v-show="iscontact == 0"></span>
            </span>
            <span class="text">不需要</span>
          </div>
        </div>
      </contact-item>
      <contact-item class="public-style" leftText="联系人" :mustFill="true" :warnShow="true" :warnText="truenameError" v-show="iscontact == 1">
        <div slot="middledom">
          <input type="text" placeholder="请输入您的名字" maxlength="15" @blur="onBlur('truename')" @input="inputName" v-model="truename">
        </div>
        <span class="anonymous-text" slot="rightdom">
          <input type="checkbox" class="checkbox" v-model="hidden">
          匿名留言
        </span>
      </contact-item>
      <contact-item class="public-style" leftText="联系电话" :mustFill="true" :warnText="telError" v-show="iscontact == 1">
        <input slot="middledom" type="tel" placeholder="请输入联系电话" @blur="onBlur('tel')" @input="inputNum('tel')" maxlength="11" v-model="tel">
      </contact-item>
      <contact-item class="public-style" leftText="电子邮箱" :warnText="emailError" v-show="iscontact == 1">
        <input slot="middledom" type="text" placeholder="请输入电子邮箱" maxlength="24" @blur="onBlur('email')" v-model="email">
      </contact-item>
      <contact-item class="public-style" leftText="QQ" :warnText="qqError" v-show="iscontact == 1">
        <input slot="middledom" type="tel" placeholder="请输入QQ号码" maxlength="10" @blur="onBlur('qq')" @input="inputNum('qq')" v-model="qq">
      </contact-item>
      <contact-item class="public-style" leftText="验证码" :mustFill="true" :warnShow="true">
        <input slot="middledom" type="text" placeholder="请输入验证码" maxlength="4" @input="oncheckImage" @blur="onBlur('verify')" v-model="verify" v-inputBlur>
        <div class="img-box" slot="rightdom">
          <img :src="imgCodeUrl" alt="验证码" @click="getRandom(10)">
        </div>
      </contact-item>
      <div class="public-style switch clearfix">
        <!-- <div class="code-tip" v-show="verifyError">
          <img src="../index/assets/code-fail.png" alt="">
          <span>{{verifyError}}</span>
        </div> -->
        <div class="code-tip" v-show="showCodeSuccess">
          <img src="../index/assets/code-success.png" alt="">
          <span>验证码正确</span>
        </div>
        <div class="code-tip" v-show="showCodeFail">
          <img src="../index/assets/code-fail.png" alt="">
          <span>{{verifyError}}</span>
        </div>
        <div @click="getRandom(10)">
          <p>看不清，换一张</p>
        </div>
      </div>
      <div class="btn-box">
        <button class="clear-btn" @click="clear">重写</button>
        <button class="submit-btn" @click="submit">提交反馈</button>
      </div>
      <vodal :show="templateShow" animation="zoom" @hide="templateShow = false" measure="rem" :width="6" :height="height" :closeButton="false">
        <div ref="template">
          <PromptFrame :errType="true" :msgText="msgText" @onClose="onClose"></PromptFrame>
        </div>
      </vodal>
    </section>
  </div>
</template>
<script>
import TitleBar from '../../components/TitleBar'
import UploadItem from '../../components/UploadItem'
import ContactItem from './components/Contact'
import consts from '../../common/consts'
import { isvalidEmail, isvalidPhone, isvalidQQ } from '../../common/validate'
import { nameRule, numRule } from '../../common/inputRule'
import PromptFrame from '../../components/PromptFrame'
import { mapState } from 'vuex'
export default {
  components: {
    TitleBar,
    UploadItem,
    ContactItem,
    PromptFrame
  },
  data() {
    return {
      imgCodeUrl: '', // 图片验证码地址
      content: '',
      random: '', // 随机数
      verify: '',
      iscontact: 0,
      hidden: false,
      truename: '',
      tel: '',
      email: '',
      qq: '',
      thumbOne: '',
      thumbTwo: '',
      thumbThree: '',
      contentError: '',
      truenameError: '',
      telError: '',
      emailError: '',
      qqError: '',
      verifyError: '',
      verifyFlag: false,
      showCodeSuccess: false,
      showCodeFail: false,
      templateShow: false,
      height: 7.6,
      msgText: '意见反馈内容有误，请仔细检查并重新填写！',
      isWeiXin: false, // 是否是手机端
      checkTimer: ''
    }
  },
  created() {
    this.isWeiXin = this.$getDeviceInfo().isWeiXin
  },
  computed: {
    ...mapState({
      wxqr: s => s.serviceInfo.wxqr
    })
  },
  watch: {
    templateShow(newVal) {
      if (newVal && this.wxqr) {
        this.height = 7.6
      } else {
        this.height = 5
      }
    },
  },
  mounted() {
    // 根据随机数 获取图片验证码
    this.getRandom(10)
  },
  methods: {
    submit() {
      // 校验表单内容
      this.validDate()
      if (this.submitFlag) {
        this.templateShow = true
        return
      }
      if (this.iscontact) {
        this.iscontact = 1
      } else {
        this.iscontact = 0
      }
      if (this.hidden) {
        this.hidden = 1
      } else {
        this.hidden = 0
      }
      // 校验验证码
      if (this.showCodeSuccess) {
        // 提交数据
        this.pushFormData()
      }
    },
    // 提交数据
    pushFormData() {
      let params = {
        'action': "m_guestbook_post",
        'content': this.content,
        'thumb': this.thumbOne,
        'thumb2': this.thumbTwo,
        'thumb3': this.thumbThree,
        'rnd': this.random,
        'verify': this.verify,
        'iscontact': this.iscontact,
        'hidden': this.hidden,
        'truename': this.truename,
        'tel': this.tel,
        'email': this.email,
        'qq': this.qq
      }
      this.$showLoading()
      this.$api.postGuestBook(this.$route.query.catid, params).then(data => {
        this.$hideLoading()
        if (data.data.status == 1) {
          this.$router.replace('/feedBackSuccess?catid=' + this.$route.query.catid + '&formPath=' + this.$route.query.formPath)
          this.clear()
        } else if (data.data.msg == '验证码已失效，请重新获取') {
          this.templateShow = true
          this.msgText = data.data.msg
          this.showCodeSuccess = false
          this.showCodeFail = false
          this.verifyError = ''
          this.verify = ''
          this.getRandom(10)
        } else {
          this.templateShow = true
          this.msgText = data.data.msg
        }
      }).catch(err => {
        this.$toast.center(err.msg)
        if (err.msg == '验证码已失效，请重新获取') {
          this.verify = ''
          this.getRandom(10)
        }
      })
    },
    oncheckImage() {
      clearTimeout(this.checkTimer)
      this.checkTimer = setTimeout(() => {
        this.$api.checkImageCodeFB({
          rnd: this.random,
          captcha: this.verify
        }).then(data => {
          if (data.data.status == 1) {
            this.showCodeSuccess = true
            this.showCodeFail = false
            this.verifyError = ''
          } else {
            this.showCodeSuccess = false
            this.showCodeFail = true
            this.verifyError = data.data.msg
          }
        }).catch(err => {
          console.log(err)
          this.$toast.center(err.msg)
        })
      }, 1000)
    },
    // 获取图片验证码
    getImgCode() {
      this.imgCodeUrl = 'http://' + consts.domain + '/api/captchas.question.png.php?rnd=' + this.random
    },
    // 获取指定位数随机数
    getRandom(num) {
      this.showCodeSuccess = false
      this.showCodeFail = false
      this.verifyError = ''
      this.verify = ''
      this.random = Math.floor((Math.random() + Math.floor(Math.random() * 9 + 1)) * Math.pow(10, num - 1))
      // 获取验证码
      this.getImgCode(this.random)
    },
    onThumbOne(url) {
      this.thumbOne = url
    },
    onThumbTwo(url) {
      this.thumbTwo = url
    },
    onThumbThree(url) {
      this.thumbThree = url
    },
    // 选择是否与您联系
    isContact(e) {
      this.iscontact = e
      // 从需要联系 切换到 不需要联系 恢复提交标志位
      if (!e) {
        if (this.content && this.verify) this.submitFlag = false
      }
    },
    onClose() {
      this.templateShow = false
      this.msgText = '意见反馈内容有误，请仔细检查并重新填写！'
    },
    validDate() {
      if (!this.content) {
        this.contentError = '必填项'
        this.submitFlag = true
        return
      } else {
        this.contentError = ''
        this.submitFlag = false
      }
      // 需要与您联系的校验
      if (this.isContact) {
        if (!this.truename && this.iscontact) {
          this.truenameError = '必填项'
          this.submitFlag = true
          return
        } else {
          this.truenameError = ''
          this.submitFlag = false
        }
        if (!this.tel && this.iscontact) {
          this.telError = '必填项'
          this.submitFlag = true
          return
        } else {
          this.telError = ''
          this.submitFlag = false
        }
        if (this.tel && !isvalidPhone(this.tel)) {
          this.telError = '联系电话错误'
          this.submitFlag = true
          return
        } else {
          this.telError = ''
          this.submitFlag = false
        }
        if (this.email && !isvalidEmail(this.email)) {
          this.emailError = '电子邮箱错误'
          this.submitFlag = true
          return
        } else {
          this.emailError = ''
          this.submitFlag = false
        }
        if (this.qq && !isvalidQQ(this.qq)) {
          this.qqError = 'QQ号码错误'
          this.submitFlag = true
          return
        } else {
          this.qqError = ''
          this.submitFlag = false
        }
      }
      if (!this.verify) {
        this.verifyError = '必填项'
        this.submitFlag = true
        return
      } else if (this.showCodeFail) {
        this.submitFlag = true
      } else {
        this.verifyError = ''
        this.submitFlag = false
      }

    },
    // 校验
    onBlur(e) {
      if (e == 'content') {
        if (!this.content) {
          this.contentError = '必填项'
          this.submitFlag = true
          return
        } else {
          this.contentError = ''
          this.submitFlag = false
        }
      }
      if (e == 'truename') {
        if (!this.truename) {
          this.truenameError = '必填项'
          this.submitFlag = true
          return
        } else {
          this.truenameError = ''
          this.submitFlag = false
        }
      }
      if (e == 'tel') {
        if (!this.tel) {
          this.telError = '必填项'
          this.submitFlag = true
          return
        } else {
          this.telError = ''
          this.submitFlag = false
        }
      }
      if (e == 'email') {
        if (this.email && !isvalidEmail(this.email)) {
          this.emailError = '电子邮箱错误'
          this.submitFlag = true
          return
        } else {
          this.emailError = ''
          this.submitFlag = false
        }
      }
      if (e == 'qq') {
        if (this.qq && !isvalidQQ(this.qq)) {
          this.qqError = 'QQ号码错误'
          this.submitFlag = true
          return
        } else {
          this.qqError = ''
          this.submitFlag = false
        }
      }
      if (e == 'verify') {
        if (!this.verify) {
          this.showCodeSuccess = false
          this.showCodeFail = true
          this.verifyError = '必填项'
          this.submitFlag = true
          return
        } else {
          // 去掉空格 大于4时候取前四位
          this.verify = this.verify.replace(/\s+/g, '')
          if (this.verify.length > 4) {
            this.verify = this.verify.substr(0, 4)
          }
          this.submitFlag = false
        }
      }
    },
    clear() {
      this.content = ''
      this.verify = ''
      this.iscontact = 0
      this.hidden = true
      this.truename = ''
      this.tel = ''
      this.email = ''
      this.qq = ''
      this.thumbOne = ''
      this.thumbTwo = ''
      this.thumbThree = ''
      this.$refs.thumbOne.clear()
      this.$refs.thumbTow.clear()
      this.$refs.thumbThree.clear()
      this.contentError = ''
      this.truenameError = ''
      this.telError = ''
      this.emailError = ''
      this.qqError = ''
      this.verifyError = ''
      this.getRandom(10)
    },
    inputName() {
      this.truename = nameRule(this.truename)
    },
    inputNum(e) {
      if (e == 'tel') {
        this.tel = numRule(this.tel)
      }
      if (e == 'qq') {
        this.qq = numRule(this.qq)
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.feed-back {
  min-height: 100vh;
  background-color: #fff;
  .tips {
    width: 100%;
    padding: 0.16rem 0.3rem;
    background: rgba(252, 237, 180, 1);
    p {
      font-size: 0.22rem;
      color: rgba(188, 144, 58, 1);
      letter-spacing: 0.01rem;
      line-height: 0.3rem;
    }
  }
  .message-box {
    background: #fff;
    padding: 0.24rem 0.3rem;
    h6 {
      font-size: 0.34rem;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      line-height: 0.34rem;
    }
    p {
      font-size: 0.24rem;
      line-height: 0.34rem;
      color: rgba(189, 189, 189, 1);
    }
    .content-box {
      margin-top: 0.3rem;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      position: relative;
      .warn-box {
        position: absolute;
        top: 0.34rem;
        left: 0;
        .warn-icon {
          display: inline-block;
          vertical-align: middle;
          width: 0.26rem;
          height: 0.26rem;
          line-height: 0.26rem;
          background: #ff3131;
          border-radius: 50%;
          text-align: center;
          font-size: 0.24rem;
          color: #fff;
          margin-right: 0.12rem;
        }
        span {
          font-size: 0.24rem;
          font-weight: 500;
          color: rgba(255, 49, 49, 1);
          line-height: 0.3rem;
        }
      }
      span {
        font-size: 0.28rem;
        color: rgba(102, 102, 102, 1);
        line-height: 0.3rem;
      }
      .star {
        &:after {
          content: "*";
          color: #fd4d4d;
          vertical-align: top;
        }
      }
      textarea {
        border: none;
        outline: none;
        resize: none;
        width: 4.6rem;
        min-height: 1.3rem;
        font-size: 0.24rem;
      }
    }
    .upload-box {
      border-top: 1px solid rgba(246, 246, 246, 1);
      padding: 0.3rem 0 0.2rem;
      display: flex;
      justify-content: space-around;
    }
  }
  .division-bg {
    width: 100%;
    height: 0.2rem;
    background: #f6f6f6;
  }
  .contact-box {
    background: #fff;
    .public-style {
      padding: 0 0.3rem;
    }
    input[type="checkbox"] {
      -webkit-appearance: checkbox;
    }
    .checkbox {
      width: 0.26rem;
      height: 0.26rem;
      vertical-align: middle;
      border: 1px solid rgba(153, 153, 153, 1);
      border-radius: 0.04rem;
    }
    .anonymous-text {
      font-size: 0.24rem;
      font-weight: bold;
      color: rgba(102, 102, 102, 1);
      line-height: 0.3rem;
    }
    .img-box {
      height: 0.68rem;
      img {
        border-left: 1px solid rgba(246, 246, 246, 1);
        padding-left: 0.2rem;
        width: 1.6rem;
        height: 0.68rem;
      }
    }
    .switch {
      p {
        float: right;
        font-size: 0.24rem;
        font-weight: 500;
        color: rgba(36, 117, 250, 1);
        line-height: 0.66rem;
        text-align: right;
      }
      .warn-box {
        line-height: 0.66rem;
        float: left;
        .warn-icon {
          display: inline-block;
          vertical-align: middle;
          width: 0.26rem;
          height: 0.26rem;
          line-height: 0.26rem;
          background: #ff3131;
          border-radius: 50%;
          text-align: center;
          font-size: 0.24rem;
          color: #fff;
          margin-right: 0.12rem;
        }
        span {
          font-size: 0.24rem;
          font-weight: 500;
          color: rgba(255, 49, 49, 1);
          line-height: 0.3rem;
        }
      }
      .code-tip {
        float: left;
        margin-left: 0.11rem;
        line-height: 0.66rem;
        img {
          width: 0.26rem;
          height: 0.26rem;
          vertical-align: middle;
        }
        span {
          margin-left: 0.2rem;
          font-size: 0.24rem;
          vertical-align: middle;
        }
      }
    }
    .btn-box {
      padding: 0.4rem 0 0.3rem;
      text-align: center;
      button {
        height: 0.82rem;
        line-height: 0.82rem;
        border-radius: 0.1rem;
        font-size: 0.34rem;
        color: rgba(255, 255, 255, 1);
      }
      .clear-btn {
        width: 2rem;
        margin-right: 0.3rem;
        background: rgba(115, 158, 251, 1);
      }
      .submit-btn {
        width: 4.6rem;
        background: rgba(220, 196, 89, 1);
      }
    }
  }
  .choose-box {
    display: flex;
    justify-content: space-between;
    .text {
      margin-left: 0.2rem;
      font-size: 0.3rem;
      line-height: 0.3rem;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
    .ring {
      display: inline-block;
      vertical-align: text-top;
      width: 0.26rem;
      height: 0.26rem;
      border: 1px solid rgba(153, 153, 153, 1);
      border-radius: 50%;
      position: relative;
      span {
        width: 0.14rem;
        height: 0.14rem;
        display: inline-block;
        background: rgba(243, 203, 24, 1);
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    }
  }
}
</style>
